import React, {useRef} from 'react';

import './index.css'

function TodoHeader(props) {
    const {todoList,dispatch} = props
    const titleRef = useRef()
    const verifyTitle = function (e) {
        const value = titleRef.current.value.trim()
        if(e.keyCode===13){
            if(!value){
                window.alert('请输入标题！')
                return
            }
        const target = todoList.find(v=>v.name===value)
            if(!target){
                dispatch({type:'ADD',payload:value})
                titleRef.current.value = ''
            }else{
                window.alert('不能输入重复的标题！')
            }
        }
    }
    return (
        <div className="todo-header">
            <input ref={titleRef} onKeyUp={verifyTitle} type="text" placeholder="请输入你的任务名称，按回车键确认"/>
        </div>
    );
}

export default TodoHeader;